import React from 'react'
import { Link } from 'react-router-dom'
import api from '@/api'
import { 
  Row,
  Button,
  Form,
  Input,
  InputNumber
} from 'antd'
const FormItem = Form.Item

class Classify_id extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      id: '',
      page: {
        title: ''
      },
      isNew: false,
      form: {
        name: '',
        sort: ''
      },
      saving: false
    }
  }
  async componentWillMount(){
    const id = this.props.match.params.id
    const isNew = isNaN(id)
    const { page, form } = this.state 
    page.title = (isNew ? '新增' : '修改') + '分类'
    if(!isNew){
      let classdata = {}
      try {
        classdata = await api.classify_getdetails(id)
      } catch (error) {
        console.log('error')
        console.log(error)
      }
      if (classdata.data.status === 'success') {
        const classobj = classdata.data.data.class
        form.name = classobj.name
        form.sort = classobj.sort
      }
    }
    this.setState({
      form, isNew, id, page
    })
    this.props.form.setFieldsValue({name: form.name, sort: form.sort})
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const handleWay = this.state.isNew ?  api.classify_add : api.classify_elt
        handleWay(this.state.id, {name: values.name, sort: values.sort})
          .then(({ data }) => {
            if(data.status === 'success'){
              this.props.history.goBack() 
            }
          })
      }
    })
  }
  render(){
    const { page} = this.state
    const { getFieldDecorator } = this.props.form
    return(
      <div>
        <Row className="mariya-filter-form">
          <div className="mariya-filter-form__title">{page.title }</div>
          <div className="mariya-filter-form__group">
            <Link to="/classify">
              <Button type="default" icon="el-icon-back">返回</Button>
            </Link>
          </div>
        </Row>
        <Row className="mariya-form mariya-form--mini">
          <Row className="mariya-table__entity">
            <Form
              className="mariya-filter-form__entity"
              style={{paddingTop: '30px'}}
              label-width="100px"
              onSubmit={this.handleSubmit}
              labelCol={{span: 4 }}
              wrapperCol={{span: 14 }}
            >
            <FormItem label="分类名称">
            {
              getFieldDecorator('name', {
                rules: [{ required: true, message: '分类名称不能为空' }]
              })(
                <Input size="large" placeholder="请输入分类名称"/>
              )
            }
            </FormItem>
            <FormItem label="排序">
            {
              getFieldDecorator('sort', {
                rules: [{ required: true, message: '排序不能为空' }]
              })(
                <InputNumber size="large" min={1} style={{width: '100%'}}/>
              )
            }
            </FormItem>
            <FormItem wrapperCol={{ span: 14, offset: 4 }}>
              <Button type="primary" htmlType="submit">提交设置</Button>
            </FormItem>
          </Form>
          </Row>
        </Row>
      </div>
    )
  }  
}
export default Form.create({})(Classify_id)

